<template>
  <view>
    <div class="box">
      <div class="item" v-for="(item, index) in data" :key="index">
        <div class="top">
          <image style="width: 50px;vertical-align: middle; border-radius: 50%;margin-right: 5px;"
            src="https://img2.baidu.com/it/u=3417128895,2295812028&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=645"
            mode="widthFix" />
          <div style="margin-top: 10px;width: 100px; font-size: 14px;">
            <div>{{ item.name }}</div>
            <div>{{ item.company }}</div>
          </div>
          <div class="btn" @click="connection(item)">在线联系</div>
          <div class="btn" @click="phone(item.mobile)">电话联系</div>
        </div>
        <div class="midou">
          <div class="left">
            <div>2月</div>
            <div>02-30</div>
          </div>
          <div class="right">
            <div>英伦古堡预计明天开盘拉啊啦啦啦...</div>
            <image style="width: 100%;"
              src="https://img2.baidu.com/it/u=4234753776,1879279203&fm=253&fmt=auto&app=138&f=JPEG?w=647&h=441"
              mode="widthFix" />
          </div>
        </div>
        <div class="footer"> </div>
      </div>
    </div>
    <div class="navb"></div>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const data = ref()
const GetData = () => {
  uni.request({
    url: 'http://10.31.71.52:7002/api/v1/broker',
    method: 'GET',
    data: {
      currentPage: '1',
      pageSize: '50'
    },
    success: (res) => {
      data.value = res.data.data
    },
  })
}
onMounted(() => {
  GetData();
})
// 电话
const phone = (mobile) => {
  uni.makePhoneCall({
    phoneNumber: mobile,
    success: (res) => {
      console.log(mobile)
    },
    fail: (fail) => {
      console.log(fail);
    },
  })
}
// 消息、metre
const connection = (item) => {
  uni.navigateTo({
    url: '/subpkg/metre/metre?item=' + item
  })
}
</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;

  .item {
    width: 100%;
    height: 350px;
    padding: 20px;
    box-sizing: border-box;

    .top {
      display: flex;
      line-height: 25px;

      .btn {
        width: 90px;
        height: 35px;
        border: 1px solid #eca6ad;
        text-align: center;
        line-height: 35px;
        margin: 15px 5px;
        border-radius: 10px;
        color: #eca6ad;
      }
    }

    .midou {
      margin-top: 20px;
      width: 100%;
      height: calc(100% - 80px);
      display: flex;

      .left {
        width: 20%;
        text-align: center;
      }

      .right {
        width: 80%;

        image {
          margin-top: 10px;
          border-radius: 10px;
        }
      }
    }

    .footer {
      border-bottom: 1px solid #ccc;
      width: 80%;
      margin: auto;
    }
  }
}
</style>
